<template>
  <div class="flowTable-container">
    <FlowHeader :submit="submitDat" v-on:routHandle="routHandle" v-on:back='isBack' />
    <div class="flowTable-content">
      <div :class="{procedureTemplate: true, topShow:topShow}">
        <div :class="{title:true, titShow:!topShow}">
          <span @click="openTem()"><i></i>流程模板</span>
          <span v-if="topShow" @click="moveTem()"> X </span>
          <span v-if="!topShow" @click="openTem()"> > </span>
        </div>
        <div class="items"  @click="changeData('sm')">
          <img src="./../../assets/temIcon1.png" alt="">
          <div>
            <div>简单流程</div>
            <div>所有人的审批都一样</div>
          </div>
        </div>
        <div class="items"  @click="changeData('to')">
          <img src="./../../assets/temIcon2.png" alt="">
          <div>
            <div>分条件流程</div>
            <div>所有人的审批都一样</div>
          </div>
        </div>
        <div class="items"  @click="changeData('more')">
          <img src="./../../assets/temIcon3.png" alt="">
          <div>
            <div>多条件流程</div>
            <div>所有人的审批都一样</div>
          </div>
        </div>
      </div>
      <div class="zoom">
        <div class="zoom-out" @click="zoomHandle('out')"></div>
        <span>{{zoom}}%</span>
        <div class="zoom-in" @click="zoomHandle('in')"></div>
      </div>
      <div class="svgBox" id="dashboard_skill_svg" @click="moveTem()" :style="{transform:`scale(${zoom/100})`}"></div>
      <div class="mask" v-show="setShow" @click="cancelData()"></div>
      <div :class="{setParamsBox: true, setShow:setShow}" >
        <div class="content" v-if="setType == 'start'">
          <div class="title">发起人</div>
          <div class="label"><span>设置发起人</span></div>
          <div class="cont">
            <Cascader v-on:getValue="getValue" :key="tabRest" :dialogVisible="dialogVisible" sel-style="width:520px;overflow:scroll" setStyle="width:100%;background: #fff;" :checkListDataes = "checkList"></Cascader>
          </div>
        </div>
        <!-- 审批人 -->
        <div class="content" v-else-if="setType == 'approval'">
          <div class="title">
            <span v-if="!cgTit">{{setTit}}<img src="./../../assets/edit.svg" @click="changeTit" style="position: relative;top:1px" width="15px" alt=""></span>
            <el-input v-if="cgTit" class="boxTit" v-model="setTit" @blur="changeTit" :autofocus="setTit" size="mini" />
          </div>
          <div class="label"><span>设置发起人</span></div>
          <div class="cont">
            <div>
              <el-radio-group v-model="tableItem.userType" style="line-height: 40px;">
                <el-radio :label="1">指定成员</el-radio>
                <el-radio :label="2">主管</el-radio>
                <el-radio :label="3">发起人自选</el-radio>
                <el-radio :label="4">发起人自己</el-radio>
                <el-radio :label="5">表单里的联系人</el-radio>
              </el-radio-group>
            </div>
            <div v-if="tableItem.userType == 1">
              <Cascader v-on:getValue="getValue" :key="tabRest" :dialogVisible="dialogVisible" sel-style="width:520px;overflow:scroll" setStyle="width:100%;background: #fff;" :checkListDataes = "checkList"></Cascader>
            </div>
            <div v-if="tableItem.userType == 2">
              <div>发起人的
                <el-select v-model="tableItem.mangerLevel" placeholder="请选择" size="mini">
                  <el-option label="直接主管" :value="1" />
                  <el-option label="二级主管" :value="2" />
                  <el-option label="三级主管" :value="3" />
                </el-select>
              </div>
              <div style="margin: 15px 0;"><el-checkbox v-model="tableItem.toUpperManagerLevel">找不到主管时,由上级主管代审批</el-checkbox></div>
              <div class="tit">多人审批时采用的审批方式</div>
              <div>
                <el-radio-group v-model="tableItem.multiApproveMode" style="line-height: 40px;">
                  <el-radio :label="1">会签</el-radio>
                  <el-radio :label="2">活签</el-radio>
                </el-radio-group>
              </div>
              <div class="tit">审批人为空时</div>
              <div>
                <el-radio-group v-model="tableItem.approveUserNull" style="line-height: 40px;">
                  <el-radio :label="1">自动通过</el-radio>
                  <el-radio :label="2">自动转交管理员</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div v-if="tableItem.userType == 3">
              <div class="tit">多人审批时采用的审批方式</div>
              <div>
                <el-radio-group v-model="tableItem.multiApproveMode" style="line-height: 40px;">
                  <el-radio :label="1">会签</el-radio>
                  <el-radio :label="2">活签</el-radio>
                </el-radio-group>
              </div>
            </div>
            <div v-if="tableItem.userType == 4">
              <div style="color:#666;font-size: 14px;">发起人自己将作为审批人处理审批单</div>
            </div>
            <div v-if="tableItem.userType == 5">
              <div>
                <Cascader v-on:getValue="getValue" :key="tabRest" :dialogVisible="dialogVisible" sel-style="width:520px;overflow:scroll" setStyle="width:100%;background: #fff;" :checkListDataes = "checkList"></Cascader>
              </div>
              <div class="tit">多人审批时采用的审批方式</div>
              <div>
                <el-radio-group v-model="tableItem.multiApproveMode" style="line-height: 40px;">
                  <el-radio :label="1">会签</el-radio>
                  <el-radio :label="2">活签</el-radio>
                </el-radio-group>
              </div>
              <div class="tit">审批人为空时</div>
              <div>
                <el-radio-group v-model="tableItem.approveUserNull" style="line-height: 40px;">
                  <el-radio :label="1">自动通过</el-radio>
                  <el-radio :label="2">自动转交管理员</el-radio>
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
        <!-- 抄送人-->
        <div class="content" v-else-if="setType == 'CCList'">
          <div class="title">
            <span v-if="!cgTit">{{setTit}} <span @click="changeTit">修改</span></span>
            <el-input v-if="cgTit" class="boxTit" v-model="setTit" @blur="changeTit" :autofocus="setTit" size="mini" />
           </div>
          <div class="cont">
            <div>
              <Cascader v-on:getValue="getValue" :key="tabRest" :dialogVisible="dialogVisible" sel-style="width:520px;overflow:scroll" setStyle="width:100%;background: #fff;"  :checkListDataes = "checkList"></Cascader>
            </div>
            <div>
              <div style="margin: 15px 0;"><el-checkbox v-model="tableItem.toUpperManagerLevel">允许发起人自选抄送人</el-checkbox></div>
            </div>
          </div>
        </div>
        <div class="content" v-else>
          <div class="title" style="display: flex; justify-content: space-between">
            <div>
                <span v-if="!cgTit">{{setTit}} <img src="./../../assets/edit.svg" @click="changeTit" style="position: relative;top:1px" width="15px" alt=""></span>
                <el-input v-if="cgTit" class="boxTit" v-model="setTit" @blur="changeTit" :autofocus="setTit" size="mini" />
            </div>
            <div>
              <el-select v-model="priorityVal" placeholder="请选择" @change="priorityHandle" size="mini">
                <el-option v-for="item in priorityList" :key="item"  :label="`优先级${item}`" :value="item"></el-option>
              </el-select>
            </div>
          </div>
          <div class="cont">
            <div style="line-height: 40px;font-size: 14px; color: #999;">当审批单同时满足一下条件时进入此流程</div>
            <div v-for="(item, index) in conditionData" :key="index">
              <div class="list"  v-if="item.type == 'statUser'">
                <div style="padding: 0 10px;line-height: 33px;">发起人</div>
                <div style="flex:1;">
                  <Cascader v-on:getValue="en => tabDatValue(en, index)" :key="tabRest" :dialogVisible="dialogVisible" sel-style="width:452px;overflow:scroll" setStyle="width:100%;background: #fff;"  :checkListDataes = "item.data.checkList"></Cascader>
                </div>
              </div>
              <div class="list" v-if="item.type == 'number' || item.type == 'money'">
                <div style="padding: 0 10px;line-height: 33px;">{{item.data.title}}</div>
                <div style="width: 100px">
                  <el-select v-model="item.data.condit" placeholder="请选择" size="mini">
                    <el-option label="小于" value="<" />
                    <el-option label="大于" value=">" />
                    <el-option label="小于等于" value="<=" />
                    <el-option label="等于" value="==" />
                    <el-option label="大于等于" value=">=" />
                  </el-select>
                </div>
                <div style="flex:1;padding: 0 10px;">
                  <el-input type="text" size="mini" v-model="item.data.value" :placeholder="item.data.placeholder"></el-input>
                </div>
              </div>
              <div class="list" v-if="item.type == 'radio'">
                <div style="padding: 0 10px;line-height: 33px;">单选框</div>
                <div style="flex:1;padding: 0 10px;">
                  <el-checkbox-group v-model="item.data.radio">
                    <el-checkbox v-for="(it, ind) in item.data.titlab" :label="it" :key="ind">{{it}}</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div class="list" v-if="item.type == 'department'">
                <div style="padding: 0 10px;line-height: 33px;">部门</div>
                <div style="flex:1">
                  <Cascader v-on:getValue="en => tabDatValue(en, index)" :key="tabRest" :dialogVisible="dialogVisible" :includeMember="1" sel-style="width:452px;overflow:scroll" setStyle="width:100%;background: #fff;"  :checkListDataes = "item.data.checkList"></Cascader>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="foot">
          <span @click="cancelData">取消</span>
          <span @click="saveData">保存</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import * as d3 from 'd3';
  import FlowHeader from '@/components/FlowHeader'
  import Cascader from './../../components/Cascader'

  export default {
    name: 'Dashboard',
    components: {
        FlowHeader,
        Cascader
    },
    data(){
      return {
        topShow:true,
        setShow:false,
        tabRest:0,
        cgTit: false,
          num:1,
        dialogVisible:false,
        dataStorage:'',
        priorityVal:'',
        setPriority:1,
        priorityList:[],
        conditDataStorage:{},
        checkList:[],
        boxType: 'box',
        setType:'',
        conditionStorage:'',
        conditionData: [],
        tableItem:{
            userType: 1,
            mangerLevel: 1,
            toUpperManagerLevel: 1,
            multiApproveMode: 1,
            approveUserNull:1,
            inDepatment: '',
            condition: '',
            conditionExpression:''
        },
        svg: '',
        zInd: 9,
        zoom: 100,
        canWit: '',
        canHit: 800,
        setTit: '',
        deployData: {},
        condDataes:[],
        data: [
          {type:'start',id:'a222', name:'发起人',items:{name:'所有人'}},
          {type:'approval',id:'a333', name:'审批人',items:{name:'请选择审批人'}},
          {type:'CCList',id:'a444', name:'抄送人',items:{name:'发起人自选'}},
        ],
        dataBuff: [
          {type:'start',id:'a222', name:'发起人',items:{name:'所有人'}},
          {type:'approval',id:'a333', name:'审批人',items:{name:'请选择审批人'}},
          {type:'CCList',id:'a444', name:'抄送人',items:{name:'发起人自选'}},
        ],
        initApproval: {type:'approval',id:'a44431', name:'审批人',items:{id:'',name:'请选择审批人'}},
        initCCList: {type:'CCList',id:'a44432', name:'抄送人',items:{id:'',name:'发起人自选'}},
        initCondition: {type:'condition',id:'a44433', name:'抄送人',items:{id:'',name:'发起人自选'}},
        init:[
              {type:'start',id:'a4441', name:'发起人',items:{id:'',name:'所有人'}},
              {type:'approval',id:'a4442', name:'审批人',items:{id:'',name:'请选择审批人'}},
              {type:'CCList',id:'a4443', name:'抄送人',items:{id:'',name:'发起人自选'}},
          ],
        datas: [
          {type:'start',id:'a444311', name:'发起人',items:{id:'',name:'所有人'}},
          {type:'condition', fid: 'a444311', node:[
            [{type:'cond',id:'a444321', name: 1, priority:1,items:{id:'',cont:'请设置条件'}},
              {type:'approval',id:'a444314', name:'审批人',items:{id:'',name:'请选择审批人'}},
              {type:'CCList',id:'a4443141', name:'抄送人',items:{id:'',name:'发起人自选'}},
            ],
            [{type:'cond',id:'a4443142', name: 2, priority:2,items: {id:'',cont:'请设置条件'}},
              {type:'approval',id:'a4443142', name:'审批人',items:{id:'',name:'请选择审批人'}},
              {type:'CCList',id:'a4443214', name:'抄送人',items:{id:'',name:'发起人自选'}},
            ],
          ]},
        ],
        moreData:[
          {type:'start',id:'a444354521', name:'发起人',items:{id:'',name:'所有人'}},
          {type:'condition', node:[
            [{type:'cond',id:'a444354523', name: 1, priority:1,items:{id:'',cont:'发起人自选'}},
              {type:'condition', node:[
                [{type:'cond',id:'a4447635456', name: 1, priority:1,items:{id:'',cont:'发起人自选'}, setInfo:[]},
                  {type:'CCList',id:'a4443785459', name:'抄送人',items:{id:'',name:'发起人自选'}, setInfo:[]},
                  {type:'approval',id:'a44035458', name:'审批人',items:{id:'',name:'请选择审批人'}, setInfo:[]},
                ],
                [ {type:'cond',id:'a444359455', name: 2, priority:2,items:{id:'',cont:'发起人自选'}, setInfo:[]},
                  {type:'CCList',id:'a444835459', name:'抄送人',items:{id:'',name:'发起人自选'}, setInfo:[]},
                  {type:'approval',id:'a447435458', name:'审批人',items:{id:'',name:'请选择审批人'}, setInfo:[]},
                ],
              ]}
            ],
            [{type:'cond',id:'a444365457', name: 2, priority:2,items:{id:'',cont:'发起人自选'}, setInfo:[]},
              {type:'condition', node:[
                [{type:'cond',id:'a444355456', name: 1, priority:1,items:{id:'',cont:'发起人自选'}, setInfo:[]},
                  {type:'CCList',id:'a4443455459', name:'抄送人',items:{id:'',name:'发起人自选'}, setInfo:[]},
                  {type:'approval',id:'a444435458', name:'审批人',items:{id:'',name:'请选择审批人'}, setInfo:[]},
                ],
                [ {type:'cond',id:'a444354355', name: 2, priority:2,items:{id:'',cont:'发起人自选'}, setInfo:[]},
                  {type:'CCList',id:'a444352459', name:'抄送人',items:{id:'',name:'发起人自选'}, setInfo:[]},
                  {type:'approval',id:'a444135458', name:'审批人',items:{id:'',name:'请选择审批人'}, setInfo:[]},
                ],
              ]}
            ],
          ]},
          {type:'CCList',id:'a44435451', name:'抄送人',items:{id:'',name:'发起人自选'}, setInfo:[]},
        ]
      }
    },
    computed: {
        ...mapGetters([
            'flowId',
            'tableData',
            'baseData',
            'flowData'
        ])
    },
    mounted(){
        this.initData()
    },
    methods: {
      async initData(){
          if (this.flowId){
              await this.$store.dispatch('approval/getFlowInfoAct', {id: this.flowId}).then((res) => {
                  this.$store.dispatch('approval/setflowdata', {...res})
                  this.$store.dispatch('approval/setflowid', '')
                  const data = JSON.parse(res.flowData)
                  data.splice(-1,1)
                  this.data = data
                  this.dataBuff = JSON.stringify(data)
                  this.setD3Canvas()
                  this.loading = false
              }).catch(() => {
                  this.$message.error('数据请求失败！请稍后重试')
                  this.loading = false
              })
          } else {
              if (this.flowData){
                  const data = JSON.parse(this.flowData)
                  data.splice(-1,1)
                  this.dataBuff = JSON.stringify(data)
                  this.data = data
              }
              this.setD3Canvas()
          }
      },
      routHandle(url){
          this.$store.dispatch('approval/setflowdata', {flowData: JSON.stringify([...this.data, {type:'end',name: '结束'}])})
          if (JSON.stringify(this.data) != JSON.stringify(JSON.parse(this.dataBuff))){
            this.$store.dispatch('approval/setBack')
          }
          this.$router.push(url)
      },
      isBack(val){
        if (JSON.stringify(this.data) != JSON.stringify(JSON.parse(this.dataBuff))){
          this.$store.dispatch('approval/setBack')
        }
      },
      // 设置画布
      setD3Canvas(){
        this.canWit = this.$el.parentNode.offsetWidth
        this.canHit = this.$el.parentNode.offsetHeight - 130
        const svg = d3.select('#dashboard_skill_svg') //选择文档中的body元素
        const node = svg.selectAll("div")
        this.svg = svg
        this.node = node
        this.initStart(node, this.data)
        const endNode = svg.append('div')
          .attr('class', 'end-node')
        endNode.append('div')
          .attr('class','end-node-circle')
        endNode.append('div')
          .attr('class','end-node-text')
          .text('流程结束')
      },
      // 初始化信息
      initStart(node, data){
        const _this = this
        const svg = node.data(data)
          .enter()
          .each(function (d) {
            if (d.type !== 'condition'){
              _this.creatBox(d3.select(this))
            } else {
              _this.creatBranch(d3.select(this), d.node)
            }
          })
      },
      // 生成分支
      creatBranch(node, data){
        const _this = this
        const branch = node.append('div')
          .attr('class', 'branch-wrap')
        const branchbox = branch.append('div')
          .attr('class', 'branch-box-wrap')
        const box = branchbox.append('div')
          .attr('class', 'branch-box')
        box.append('button')
          .attr('class', 'add-branch')
          .text('添加分支')
          .on('click',function (d) {
            const dt = [{type:'cond',name: d.node.length+1, priority: d.node.length+1, items: {id:'', cont:'请设置条件'}}]
            d.node.push(dt)
            _this.svg.selectAll('div').remove()
            _this.setD3Canvas()
          })
        const col = box.selectAll('div')
          .data(data)
          .enter()
        const colbox = col.append('div')
          .attr('id', (d,i) => `col${_this.getId()}`)
          .attr('class', 'col-box')
        const firstNode = col.select('div').filter(function (d,i) {
          return i === 0
        })
        const lastNode = col.selectAll('div').filter(function (d,i) {
          return i === (data.length-1)
        })
        firstNode.append('span')
          .attr('class','top-left-cover-line')
        firstNode.append('span')
          .attr('class','bottom-left-cover-line')
        lastNode.append('span')
          .attr('class','top-right-cover-line')
        lastNode.append('span')
          .attr('class','bottom-right-cover-line')
        col.each(function (dts,i) {
          colbox.each(function (d,j) {
            if (i === j){
              d3.select(this).selectAll('div')
                .data(dts)
                .enter()
                .each(function (dt) {
                  if (dt.type !== 'condition'){
                    if (dt.type === 'cond') {
                      _this.createConditionBox(d3.select(this))
                    }else{
                      _this.creatBox(d3.select(this))
                    }
                  } else {
                    _this.creatBranch(d3.select(this), dt.node)
                  }
                })
            }
          })
        })
        this.createMark(branchbox)
      },

      // 生成审核框
      creatBox(node) {
        const _this = this
        const nodewrap = node.append('div')
          .attr('class','node-wrap')
        const cont = nodewrap.append('div')
          .attr('class', d => d.type === 'start' ? 'node-wrap-box start-node': 'node-wrap-box')
        const tit = cont.append('div')
          .attr('class','title')
          .style("background", function(d){
            if (d.type === 'start') {
              return '#576A96'
            } else if (d.type == 'approval'){
              return 'rgb(255, 148, 62)'
            } else if (d.type == 'CCList'){
              return 'rgb(50, 150, 250)'
            }
          })
        tit.append('span')
          .attr('class', function (d) {
            if (d.type === 'CCList'){
              return 'icon iconshenpiren'
            } else if (d.type === 'approval'){
              return 'icon iconchaosong'
            } else {
              return 'icon'
            }
          })
        tit.append('span')
          .attr('class', 'edit-tit')
          .text(d => d.name)
        tit.append('i')
          .attr('class', 'close')
          .text('x')
          .on('click',function (d) {
            _this.delData(_this.data, d)
            d3.select(this.parentNode.parentNode.parentNode).remove()
          })
        tit.on('click',function (d) {
          if (d.type == 'starts' ){
              d3.select(this).select('.edit-tit').join(
                  enter => {},
                  update => {
                      if (!update.select('input')._groups[0][0]){
                          update.text('')
                          const put = update.append('input')
                              .attr('value', d.name)
                              .attr('class', 'chName')
                              .attr('autofocus','autofocus')
                              .on('blur', function () {
                                  d.name = this.value
                                  update.text(d.name)
                                  put.remove()
                              })
                      }
                  }
              )
          }
        })
        cont.append('div')
          .attr('class', 'content')
          .text((d) => _this.itemTitProcess(d))
          .on('click',function (d) {
            _this.dataStorage = JSON.parse(JSON.stringify(_this.data))
            _this.setShow = true
            _this.boxType = 'box'
            _this.setType = d.type
            _this.setTit = d.name
            _this.tableDataChange(d)
          })
        this.createMark(nodewrap)
      },
      // 审批框内容处理
      itemTitProcess(d){
          let name = ''
          if (d.type === 'approval') {
            switch(d.userType){
              case 2 : {
                if (d.mangerLevel == 1) {
                  name = '发起人的直接主管'
                } else if(d.mangerLevel == 2) {
                  name = '发起人的二级主管'
                } else {
                  name = '发起人的三级主管'
                }
                break;
              }
              case 3 : {
                name = '发起人自选'
                break;
              }
              case 4 : {
                name = '发起人自己'
                break;
              }
              default :{
                name = d.items.name
                break;
              }
            }
          } else {
            name = d.items.name
          }
          return name
      },
      // 右边弹框数据处理
      tableDataChange(obj){
          this.tableItem = obj
          this.checkList = obj.userRange || []
      },
      // 生成条件框
      createConditionBox(node, data){
        const _this = this
        const condNode = node.append('div')
          .attr('class', 'condition-node')
        const atuo = condNode.append('div')
          .attr('class', 'condition-node-box')
        const auto = atuo.append('div')
          .attr('class','auto-judge')
          .on('click',function (d) {
              _this.conditDataStorageHandle(_this.data,d)
              _this.dataStorage = JSON.parse(JSON.stringify(_this.data))
              _this.boxType = 'condit'
              _this.setType = d.type
              _this.setPriority = d.priority,
              _this.priorityVal = d.priority,
              _this.setTit = typeof (d.name) === 'number' ? '条件'+ d.name : d.name
              _this.conditionHandle(d)
              _this.tabRest++
              _this.setShow = true
          })
        const tit = auto.append('div')
          .attr('class', 'title-wrapper')
        tit.append('span')
          .attr('class', 'edit-tit')
          .text(d => typeof (d.name) === 'number' ? '条件'+d.name :d.name)
        tit.append('span')
          .attr('class', 'prio-tit')
          .text(d => `优先级${d.priority}`)
        tit.append('i')
          .attr('class', 'close')
          .text('x')
          .on('click',function (d) {
            const event = window.event || event
            event ? event.stopPropagation(): null
            _this.delBranchData(_this.data, d)
            _this.svg.selectAll('div').remove()
            _this.setD3Canvas()
            return false
          })
        auto.append('div')
          .attr('class', 'content')
          .text(d => d.items.cont ? d.items.cont : '请设置条件')
        atuo.append('div')
          .attr('class', 'add-node-btn')
          .append('div')
          .attr('class','btn')
          .on("click", function (d) {
            _this.zInd+=1
            _this.reAddBox(_this.svg)
            _this.createAddBox(_this.svg, this.parentNode, d)
          })
      },
      // 生成三角号
      createMark(node){
        const _this = this
        node.append('div')
          .attr('class', 'add-node-btn-box')
          .append('div')
          .attr('class', 'add-node-btn')
          .append('div')
          .attr('class','btn')
          .on("click", function (d) {
            _this.zInd+=1
            _this.reAddBox(_this.svg)
            _this.createAddBox(_this.svg, this.parentNode.parentNode,d)
          })
      },

      // 创建新增模块
      createAddBox(svg, tsNode, dat){
        const _this = this
        const itemData = [{name:'审批人',type:'initApproval'}, {name:'抄送人',type:'initCCList'}, {name:'条件分支',type:'initCondition'}]
        const node = d3.select(tsNode)
        node.style('z-index', _this.zInd)
        const cNode = node.append('div')
          .attr("class", 'addbox')
        cNode.append('span')
          .attr("class",'cls')
          .on('click', function () {
            _this.reAddBox(svg)
          })
        const ccNode = cNode.append('div')
          .attr("class",'contBox')
          .selectAll(`div`)
          .data(itemData)
          .enter()
        const cn = ccNode.append('div')
          .attr("class",'items')
        cn.append('div')
          .attr("class",function (d) {
            if (d.type == 'initApproval'){
              return 'icon iconshenpiren'
            } else if (d.type == 'initCCList'){
              return 'icon iconchaosong'
            }else{
              return 'icon iconfenzhi'
            }
          })
          .on('click',function(d){
            if(d.type === 'initCondition'){
              _this.moreBranchData(_this.data, dat)
              svg.selectAll('div').remove()
              _this.setD3Canvas()
            }else{
              _this.delData(_this.data, dat, d)
              svg.selectAll('div').remove()
              _this.setD3Canvas()
            }
          })
        cn.append('div')
          .attr("class",'text')
          .text(function (d) {
            return d.name
          })
      },
      // 数据删除、添加
      delData(data, chData, isAdd){
        const _this = this
        const num = data.indexOf(chData)
        if ( num !== -1) {
          isAdd ? data.splice(num+1,0,_this[isAdd.type]) : data.splice(num,1)
          return true
        } else {
          data.forEach(n => {
            if (n.type === "condition"){
              for(var i=0;i< n.node.length;i++){
                let st = _this.delData(n.node[i], chData, isAdd)
                if (st) {
                  break
                }
              }
            }
          })
        }
      },
      // 多分支数据处理添加
      moreBranchData(data, dt){
        const _this = this
        const num = data.indexOf(dt)
        if ( num !== -1) {
          const yData = data.slice(num+1, data.length)
          const intData = {type:'condition', node:[
            [{type:'cond',id:`${_this.getId()}`, name: 1, priority:1,items:{id:'',cont:'请设置条件'}, condition:[]},...yData],
            [{type:'cond',id:`${_this.getId()}`, name: 2, priority:2,items: {id:'',cont:'请设置条件'}, condition:[]}],
          ]}
          data.splice(num+1,data.length,intData)
        } else {
          data.forEach(n => {
            if (n.type === "condition"){
              for(var i=0;i< n.node.length;i++){
                let st = _this.moreBranchData(n.node[i], dt)
                if (st) {
                  break
                }
              }
            }
          })
        }
      },
      //删除分支数据
      delBranchData (data, dt, fData, h, i, source) {
        const _this = this
        const num = data.indexOf(dt)
        if ( num !== -1) {
          if (fData.node.length > 2){
            fData.node.splice(i, 1)
            fData.node.forEach((n,j) => {
              n[0].priority = j+1
            })
          }else{
            const cont = fData.node[1-i].slice(1, fData.node[1-i].length)
            source.splice(h, 1, ...cont)
          }
          return true
        } else {
          data.forEach((n, h) => {
            if (n.type === "condition"){
              for(var i=0;i< n.node.length;i++){
                let st = _this.delBranchData(n.node[i], dt, n, h, i, data)
                if (st) {
                  break
                }
              }
            }
          })
        }
      },
      // 生成无重复ID
      getId(){
        return Math.random().toString(16).substr(3)
      },
      // 移除新增模块
      reAddBox(svg){
        const dt = svg.select('.addbox')
        dt.remove()
      },
      // 缩放整体视图
      zoomHandle(st){
        if (st === 'in') {
          this.zoom = this.zoom >= 200 ? 200 : this.zoom+10
        } else {
          this.zoom = this.zoom <= 50 ? 50 : this.zoom-10
        }
      },
      // 流程模板切换
      changeData(st){
        if(st == 'sm'){
          this.data = JSON.parse(JSON.stringify(this.init))
        } else if(st == 'to'){
          this.data = JSON.parse(JSON.stringify(this.datas)) //this.datas.concat()
        } else if(st == 'more') {
          this.data = JSON.parse(JSON.stringify(this.moreData)) //this.moreData.concat()
        }
        this.dataBuff = JSON.stringify(this.data)
        this.svg.selectAll('div').remove()
        this.setD3Canvas()
      },
      // 条件处理
      conditionHandle(d){
        d.condition = this.conditDataContrast(d.condition)
        console.log(234234,d.condition)
        const data = this.dataHandle(this.data, d)
        this.conditionStorage = d
        this.conditionData = d.condition
      },
      // data数据遍历
      dataHandle(obj,d){
          obj.forEach((n,i) => {
              if (n.id = d.id){
                  return obj
              }else{
                  this.dataHandle(n, d)
              }
          })
      },
        //  右边弹框数据保存
        saveData(){
            if (this.boxType == 'condit'){
                this.conditionStorage.name = this.setTit
                this.conditionExpressionHandle()
                console.log(66,this.conditionStorage)
            }else{
                let itemTit = []
                this.tableItem.userRange = this.checkList
                if(this.checkList.length>0){
                    this.checkList.forEach(n => itemTit.push(n.objectName))
                    this.tableItem.items.name = itemTit.join(',')
                }
                this.tableItem.name = this.setTit
                console.log(66,this.tableItem)
            }
            this.tabRest++
            this.svg.selectAll('div').remove()
            this.setD3Canvas()
            this.setShow = false
        },
        // 条件数据处理 - 给后端的格式
        conditionExpressionHandle(){
            const conditionArr = []
            const titleArr = []
            this.conditionData.forEach(n => {
                const name = n.name || n.lab
                if (n.type == 'statUser' && Array.isArray(n.data.checkList) && n.data.checkList.length > 0){
                    let tit = []
                    if (n.data.inUser > 0) {
                        conditionArr.push(`\$\{statUser\}inUser[${n.data.inUser}]`)
                    }
                    if (Array.isArray(n.data.inDepartment) &&n.data.inDepartment.length > 0) {
                        conditionArr.push(`\$\{statUser\}inDepartment[${n.data.inDepartment }]`)
                    }
                    n.data.checkList.forEach(n => {
                        const nm = n.name || n.lab
                        tit.push(nm)
                    })
                    titleArr.push(`发起人：${tit.join('或')}`)
                }else if(n.type == 'number' && n.data.condit){
                    conditionArr.push(`\$\{${n.fieldKey}\}${n.data.condit}${n.data.value || 0}`)
                    titleArr.push(n.data.title + n.data.condit+ n.data.value)
                }else if(n.type == 'money' && n.data.condit){
                    conditionArr.push(`\$\{${n.fieldKey}\}${n.data.condit}${n.data.value || 0}`)
                    titleArr.push(name + n.data.condit+ n.data.value)
                }else if (n.type == "radio" && Array.isArray(n.data.radio) && n.data.radio.length > 0) {
                    let rodio = []
                    n.data.radio.forEach(h => {
                        rodio.push(`\$\{${n.fieldKey}\} == ${h}`)
                    })
                    conditionArr.push(rodio.join('||'))
                    titleArr.push(n.data.title + `:` + n.data.radio.join(','))
                } else if (n.type == "department" && Array.isArray(n.data.checkList) && n.data.checkList.length>0){
                    let tit = []
                    n.data.checkList.forEach(n => {
                        tit.push(n.name)
                    })
                    titleArr.push(`发起人：${tit.join('或')}`)
                    conditionArr.push(`\$\{currUserId\}inDepatment[${n.data.inDepartment}]`)
                    titleArr.push(`部门：${tit.join(',')}`)
                }
            })
            this.conditionStorage.items.cont = Array.isArray(titleArr) && titleArr.length > 0 ? titleArr.join(',') : ''
            this.conditionStorage.conditionExpression = Array.isArray(conditionArr) && conditionArr.length>0 ? conditionArr.join('&&') : ''
        },
        //  右边弹框数据取消
        cancelData(){
            if (this.boxType == 'condit'){
                this.data = JSON.parse(JSON.stringify(this.dataStorage))
                this.setShow = false
            }
            this.setShow = false
            this.checkList = this.tableItem.userRange || []
            this.tabRest++
        },
      // 条件数据对比处理
      conditDataContrast(objData){
          const data = JSON.parse(JSON.stringify(this.tableData))
          let retData = []
          let condition = [{type:'statUser', fieldKey: 'statUser',name: '发起人', data:{checkList:[],inUser: [], inDepartment: []} }]
          data.map((n) => {
              if (n.type == 'radio' && n.data.isMust || n.type == 'money' && n.data.isMust || n.type == 'number' && n.data.isMust || n.type == 'department' && n.data.isMust ){
                  condition.push({...n})
              }
          })
          if (Array.isArray(objData) && objData.length > 0) {
              let newData = condition
              condition.forEach((h,i) => {
                  objData.forEach(n => {
                      if (h.fieldKey == n.fieldKey) {
                          newData.splice(i, 1, {...n})
                      }
                  })
              })
              retData = newData
          } else {
              retData = condition
          }
          return retData
      },
      // 打开模板展示
      openTem(){
        this.topShow = true
      },
      // 关闭模板展示
      moveTem(){
        this.topShow = false
      },
      // 条件部门人员选择框
      tabDatValue(val,ind){
        if (this.conditionData[ind].type == 'statUser'){
            let user = []
            let department = []
            val.forEach(n => {
                if (n.type == '2'){
                    user.push(n.id)
                }else{
                    department.push(n.id)
                }
            })
            this.conditionData[0].data.checkList = val
            this.conditionData[0].data.inUser = user
            this.conditionData[0].data.inDepartment = department
        } else if (this.conditionData[ind].type == 'department'){
            let department = []
            val.forEach(n => {
                department.push(n.id)
            })
            this.conditionData[ind].data.inDepartment = department
            this.conditionData[ind].data.checkList = val
        }
      },
      // 发起人、审批人、抄送人部门人员选择框数据处理
      getValue(val){
          this.checkList = val.map(n => {
              return {objectId: n.id,objectName:n.name, objectType: n.type}
          })
      },
      // 右弹框 标题调整
      changeTit(){
        this.cgTit = !this.cgTit
      },
      // 条件优先级下拉数据
      conditDataStorageHandle(source,d){
          for (let val of source) {
              if (val.type == 'condition'){
                  for (let vale of val.node){
                      if (vale[0].type == 'cond' && vale[0].id == d.id){
                          this.conditDataStorage = val
                          this.conditListStorage(this.conditDataStorage)
                      }else{
                          this.conditDataStorageHandle(vale,d)
                      }
                  }
              }
          }
      },
      // 优先级下拉处理
      conditListStorage(dat){
        let list = []
        dat.node.forEach(n => {
          list.push(n[0].priority)
        })
        this.priorityList = list
      },
      // 优先级选择数据处理
      priorityHandle(){
          const n = this.setPriority - 1
          const m = this.priorityVal -1
          this.conditDataStorage.node[n] = this.conditDataStorage.node.splice(m, 1, this.conditDataStorage.node[n])[0]
          for (let i=0; i< this.conditDataStorage.node.length;i++){
              this.conditDataStorage.node[i][0].priority = i + 1
          }
          this.setPriority = m + 1
      },
      // 提交数据验证
      async verificationHandle(data){
          this.condDataes = []
          await this.varifQuery(data)
          if (this.condDataes.length == 0){
            return true
          } else {
            return false
          }
      },
      // 验证数据查询
      varifQuery(data){
        for (let i = 0; i< data.length; i++) {
          if (Array.isArray(data[i])) {
            for(let j = 0; j<data[i].length; j++){
              this.varifQuery(data[i])
            }
          } else {
            if (data[i].type == 'condition') {
              this.varifQuery(data[i].node)
            } else if (data[i].type == 'cond') {
              if (!data[i].conditionExpression){
                  this.$message.error(`请设置条件${data[i].name}后保存发布`)
                  this.condDataes.push(data[i].name)
                  return false
              }
            }
          }
        }
      },
      // 数据保存
      submitDat (){
          this.verificationHandle(this.data).then(async res => {
            if(res){
                await this.$store.dispatch('approval/setflowdata', { flowData:  typeof(this.data) === 'string' ? this.data : JSON.stringify(this.data)})
                await this.$store.dispatch('approval/setflowst', 'memory')
                let pramsFlowData = [...this.data,{name: '结束', type: 'end'}]
                const flowData = JSON.stringify(pramsFlowData)
                const tableData = []
                this.tableData.forEach(n => {
                    tableData.push({...n, title: n.data.title, data: typeof(n.data) === 'string' ? n.data : JSON.stringify(n.data)})
                })
                const pramas = {baseData:this.baseData, tableData, flowData}
                await this.$store.dispatch('approval/addFlowInfoAct', {...pramas})
                .then(res => {
                    this.$store.dispatch('approval/setBack', true)
                    this.$message.success('数据发布成功！')
                    this.$router.push('/approval/admin')
                })
                .catch(err => {
                    this.$message.error('出错了：'+err)
                })
            }
          }).catch(err => {
            this.$message.error('出错了， 请刷新重试一下吧！')
          })
      },
    },
    watch: {

    }
  }
</script>

<style lang="scss">
  body{
    background-color: #f7f8fc !important;
  }
  .boxTit{
    width: 150px;
    .el-input__inner{
      font-size: 16px;
      border-color: #3345ff;
    }
  }
  .flowTable {
    &-title {
      position: fixed;
      z-index: 99999;
      top:0px;
      left: 0px;
      width: 100%;
      color:#fff;
      background: #38adff;
      .topBox{
        display: flex;
        text-align: center;
        width: 500px;
        margin: 0 auto;
        padding: 25px 0;
      }
      .label{
        flex: 1;
        cursor: pointer;
        span{
          display: inline-block;
          width: 16px;
          height:16px;
          line-height: 16px;
          font-size: 12px;
          border-radius: 100%;
          border: solid 1px #fff;
          margin-right: 4px;
        }
      }
    }
    &-content{
      position: relative;
      overflow: scroll;
      top:68px;
      .procedureTemplate{
        position: fixed;
        z-index: 99;
        top:68px;
        box-shadow: 0 3px 10px 0 rgba(0,0,0,.1);
        background: #fff;
        left: -280px;
        width: 280px;
        height: 100%;
        .title{
          margin: 17px 0;
          font-size: 14px;
          color:#666;
          padding: 0 15px;
          width: 100%;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
          i{
            position: relative;
            display: inline-block;
            width: 14px;
            height: 14px;
            top:2px;
            margin-right: 4px;
            background: #3296fa;
            &:before{
              position: absolute;
              content: '';
              width: 14px;
              height: 1px;
              left: 0;
              top:7px;
              background: #f4f4f5;
            }
            &:after{
              position: absolute;
              content: '';
              width: 1px;
              height: 14px;
              left: 7px;
              top:0px;
              background: #f4f4f5;
            }
          }
        }
        .titShow{
          position: fixed;
          display: flex;
          align-items: center;
          padding: 7px 10px;
          width: 131px;
          top: 60px;
          left: 0;
          z-index: 100;
          background: #fff;
          box-shadow: 0 3px 10px 0 rgba(0,0,0,.1);
          border-radius: 0 18px 18px 0;
        }
        .items{
          font-size: 12px;
          line-height: 1.5;
          color:#666;
          cursor: pointer;
          margin: 8px 15px;
          padding: 6px 10px;
          border-radius: 2px;
          border: 1px solid #e3e4e4;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          img{
            width: 30px;
            height: 30px;
            margin-right: 6px;
          }
        }
      }
      .mask{
        background: rgba(0,0,0,0.2);
        position: fixed;
        left: 0;
        top:0;
        width: 100%;
        height: 100%;
        z-index: 100;
      }
      .setParamsBox{
        position: fixed;
        z-index: 999;
        top:68px;
        box-shadow: 0 -3px 10px 0 rgba(0,0,0,.1);
        background: #fff;
        right: -550px;
        width: 550px;
        height: 100%;
        .title{
          line-height: 50px;
          padding: 0px 30px;
          border-bottom: solid 1px #ccc;
        }
        .content{
          .label{
            position: relative;
            color: #1890ff;
            line-height: 40px;
            font-size: 14px;
            border-bottom: solid 1px #ccc;
            span{
              position: relative;
              bottom: -1px;
              display: inline-block;
              padding: 0 20px;
              border-bottom: solid 2px #1890ff;
            }
          }
          .cont{
            padding: 15px;
            .tit{
              margin: 15px 0;
            }
            .list{
              display: flex;
              line-height: 33px;
              margin: 10px 0;
            }
          }
        }
        .foot{
          position: absolute;
          width: 100%;
          left: 0;
          bottom:70px;
          padding:15px;
          border-top: solid 1px #ccc;
          text-align: right;
          span{
            border:solid 1px #ccc;
            text-align: center;
            font-size: 14px;
            border-radius: 4px;
            padding: 5px 15px;
            margin: 0px 10px;
            cursor: pointer;
          }
        }
      }
      .setShow{
        transition: 200ms;
        right:0;
      }
      .topShow{
        transition: 200ms;
        left:0;
      }
      .svgBox {
        transform: scale(1);
        display: inline-block;
        position: relative;
        width: 100%;
        padding: 50px 0 100px 0;
        align-items: flex-start;
        justify-content: center;
        flex-wrap: wrap;
        min-width: -webkit-min-content;
        min-width: -moz-min-content;
        min-width: min-content;
        background-color: #f7f8fc;
        transform-origin: 0 0 0;
        .node-wrap {
          display: inline-flex;
          width: 100%;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
          flex-wrap: wrap;
          padding: 0 50px;
          position: relative;
          .icon{
            font-size: 14px;
            margin-right: 5px;
          }
        }
        .branch-wrap{
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          align-items: center;
          min-height: 270px;
          min-width: 100%;
          .branch-box-wrap{
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 270px;
            min-width: 100%;
            flex-shrink: 0;
          }
          .branch-box{
            display: flex;
            overflow: visible;
            min-height: 180px;
            height: auto;
            border-bottom: 2px solid #ccc;
            border-top: 2px solid #ccc;
            position: relative;
            margin-top: 15px;
            .col-box{
              display: inline-flex;
              flex-direction: column;
              align-items: center;
              position: relative;
              &:before{
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 0;
                margin: auto;
                width: 2px;
                height: 100%;
                background-color: #cacaca;
              }
              .condition-box{
                padding-top: 30px;
                padding-right: 50px;
                padding-left: 50px;
                -webkit-box-pack: center;
                justify-content: center;
                -webkit-box-align: center;
                align-items: center;
                flex-grow: 1;
                position: relative;
                .branch-itembox{
                  position: relative;
                  width: 220px;
                  min-height: 72px;
                  background: #fff;
                  border-radius: 4px;
                  padding: 14px 19px;
                  cursor: pointer;
                }
              }
              .condition-node-box{
                padding-top: 30px;
                padding-right: 50px;
                padding-left: 50px;
                justify-content: center;
                align-items: center;
                flex-grow: 1;
                position: relative;
                &:before{
                  content: "";
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  margin: auto;
                  width: 2px;
                  height: 100%;
                  background-color: #cacaca;
                }
                .auto-judge{
                  position: relative;
                  width: 220px;
                  min-height: 72px;
                  background: #fff;
                  border-radius: 4px;
                  padding: 14px 19px;
                  cursor: pointer;
                  &:after{
                    pointer-events: none;
                    content: "";
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    z-index: 2;
                    border-radius: 4px;
                    border: 1px solid transparent;
                    transition: all .1s cubic-bezier(.645,.045,.355,1);
                    box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);
                  }
                  &.active:after,&:active:after,&:hover:after {
                    border: 1px solid #3296fa;
                    box-shadow: 0 0 6px 0 rgba(50,150,250,.3)
                  }
                  &:hover .title-wrapper .close{
                    display: block;
                  }
                  .title-wrapper{
                    position: relative;
                    font-size: 12px;
                    color: #15bc83;
                    text-align: left;
                    line-height: 16px;
                    .edit-tit{
                      display: inline-block;
                      max-width: 120px;
                      overflow: hidden;
                      white-space: nowrap;
                      text-overflow: ellipsis;
                    }
                    .prio-tit{
                      display: inline-block;
                      float: right;
                      margin-right: 10px;
                      color: rgba(25,31,37,.56);
                    }
                    .close{
                      display: none;
                      position: absolute;
                      font-style: normal;
                      right: -10px;
                      top: -10px;
                      width: 20px;
                      height: 20px;
                      font-size: 14px;
                      color: #ccc;
                      border-radius: 50%;
                      text-align: center;
                      line-height: 20px;
                    }
                  }
                  .content{
                    font-size: 14px;
                    color: #191f25;
                    text-align: left;
                    margin-top: 6px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                  }
                }
                .add-node-btn{
                  position: relative;
                  user-select: none;
                  width: 240px;
                  padding: 20px 0 32px;
                  display: flex;
                  justify-content: center;
                  flex-shrink: 0;
                  flex-grow: 1;
                  .btn{
                    outline: none;
                    box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
                    width: 30px;
                    height: 30px;
                    text-align: center;
                    background: #3296fa;
                    border-radius: 50%;
                    position: relative;
                    border: none;
                    line-height: 26px;
                    cursor: pointer;
                    &:before{
                      content: '+';
                      font-size: 24px;
                      color:#fff;
                    }
                    &:hover{
                      transition: 200ms;
                      transform: scale(1.3);
                      box-shadow: 4px 4px 8px 2px rgba(0,0,0,.1);
                    }
                  }
                }
              }
            }
            .add-branch{
              border: none;
              outline: none;
              user-select: none;
              justify-content: center;
              font-size: 12px;
              padding: 0 10px;
              height: 30px;
              line-height: 30px;
              border-radius: 15px;
              color: #3296fa;
              background: #fff;
              box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
              position: absolute;
              top: -16px;
              left: 50%;
              transform: translateX(-50%);
              transform-origin: center center;
              cursor: pointer;
              z-index: 1;
              display: inline-flex;
              align-items: center;
              transition: all .3s cubic-bezier(.645,.045,.355,1);
            }
          }
        }
        .add-node-btn-box{
          width: 240px;
          display: inline-flex;
          flex-shrink: 0;
          position: relative;
          &:before{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 2px;
            height: 100%;
            background-color: #cacaca;
          }
          .add-node-btn {
            user-select: none;
            width: 240px;
            padding: 20px 0 32px;
            display: flex;
            justify-content: center;
            flex-shrink: 0;
            flex-grow: 1;
            .btn{
              outline: none;
              box-shadow: 0 2px 4px 0 rgba(0,0,0,.1);
              width: 30px;
              height: 30px;
              text-align: center;
              background: #3296fa;
              border-radius: 50%;
              position: relative;
              border: none;
              line-height: 26px;
              cursor: pointer;
              &:before{
                content: '+';
                font-size: 24px;
                color:#fff;
              }
              &:hover{
                transition: 200ms;
                transform: scale(1.3);
                box-shadow: 4px 4px 8px 2px rgba(0,0,0,.1);
              }
            }
          }
        }
        .node-wrap-box {
          display: inline-flex;
          position: relative;
          flex-direction: column;
          cursor: pointer;
          width: 220px;
          min-height: 78px;
          background: #fff;
          border-radius: 5px;
          z-index: 9;
          &:before{
            content: "";
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 4px;
            border-style: solid;
            border-width: 8px 6px 4px;
            border-color: #cacaca transparent transparent;
            background: #f7f8fc;
          }
          &:after {
            pointer-events: none;
            content: "";
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            border-radius: 4px;
            border: 1px solid transparent;
            transition: all .1s cubic-bezier(.645,.045,.355,1);
            box-shadow: 0 2px 5px 0 rgba(0,0,0,.1)
          }

          &.active:after,&:active:after,&:hover:after {
            border: 1px solid #3296fa;
            box-shadow: 0 0 6px 0 rgba(50,150,250,.3)
          }
          &:hover .title .close{
            display: block;
          }
          &:hover .title .edit-tit{
            border-bottom: dashed 1px #fff;
          }
          .title{
            position: relative;
            padding-left: 16px;
            padding-right: 30px;
            width: 100%;
            height: 24px;
            line-height: 24px;
            font-size: 12px;
            color: #fff;
            text-align: left;
            background: #576a95;
            border-radius: 4px 4px 0 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            display: flex;
            .icon{

            }
            .edit-tit{
              height: 20px;
              .chName{
                border-radius: 3px;
                border: solid 1px #fff;
                width: 170px;
                line-height: 14px;
                padding: 2px 10px;
              }
            }
            .close{
              display: none;
              position: absolute;
              font-size: 14px;
              font-style: normal;
              right: 10px;
              top: 50%;
              transform: translateY(-50%);
              width: 20px;
              height: 20px;
              font-size: 14px;
              color: #fff;
              border-radius: 50%;
              text-align: center;
              line-height: 20px;
            }
          }
          .content{
            position: relative;
            font-size: 14px;
            padding: 16px;
            padding-right: 30px;
          }
        }
        .start-node:before{
          content: none;
        }
        .start-node{
          &:hover .title .close{
            display: none !important;
          }
          &:hover .title .edit-tit{
            border-bottom: none;
          }
        }
      }
      .top-left-cover-line, .top-right-cover-line{
        position: absolute;
        display: block;
        height: 3px;
        width: 50%;
        background-color: #f7f8fc;
        top: -2px;
      }
      .top-left-cover-line{
        left:-1px;
      }
      .bottom-left-cover-line{
        left:-1px;
      }
      .bottom-left-cover-line, .bottom-right-cover-line{
        position: absolute;
        height: 3px;
        width: 50%;
        background-color: #f7f8fc;
        bottom: -2px;
      }
      .top-right-cover-line,.bottom-right-cover-line{
        right:-1px;
      }
      .end-node {
        border-radius: 50%;
        font-size: 14px;
        color: rgba(25, 31, 37, .4);
        text-align: left;
        .end-node-circle {
          width: 10px;
          height: 10px;
          margin: auto;
          border-radius: 50%;
          background: #dbdcdc;
        }
        .end-node-text {
          margin-top: 5px;
          text-align: center;
        }
      }
      .zoom{
        display: flex;
        position: fixed;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 40px;
        width: 125px;
        top:70px;
        right: 40px;
        margin-top: 30px;
        z-index: 10;
        .zoom-in, .zoom-out{
          width: 30px;
          height: 30px;
          background: #fff;
          color: #c1c1cd;
          cursor: pointer;
          background-size: 100%;
          background-repeat: no-repeat;
        }
        .zoom-out {
          background-image: url(https://gw.alicdn.com/tfs/TB1s0qhBHGYBuNjy0FoXXciBFXa-90-90.png);
        }
        .zoom-in {
          background-image: url(https://gw.alicdn.com/tfs/TB1UIgJBTtYBeNjy1XdXXXXyVXa-90-90.png);
        }
      }
      .addbox{
        position: absolute;
        left: 150px;
        top: 20px;
        display: block;
        width: 320px;
        height: 150px;
        box-shadow: 0 2px 8px rgba(0,0,0,.15);
        background: #fff;
        border-radius: 5px;
        z-index: 8;
        &:after{
          content: '';
          display: block;
          background: #fff;
          left: -4px;
          top: 12px;
          width: 8px;
          height: 8px;
          transform: rotate(45deg);
          position: absolute;
          display: block;
          border-color: transparent;
          border-style: solid;
        }
        .cls{
          position: relative;
          cursor: pointer;
          display: block;
          width: 100%;
          height: 40px;
          &:after{
            content: 'X';
            position: absolute;
            right: 15px;
            top:15px;
            color:#ccc;
          }
        }
        .contBox{
          position: relative;
          display: flex;
          padding: 0px 10px 10px 10px;
          width: 100%;
          text-align: center;
          .items{
            flex: 1;
            .icon{
              display: inline-block;
              width: 70px;
              height: 70px;
              line-height: 70px;
              margin-bottom: 5px;
              border-radius: 100%;
              border: solid 1px #ccc;
              font-size: 35px;
              cursor: pointer;
            }
            .iconshenpiren{
              color:#ff943e;
              &:hover{
                color:#fff;
                background: #ff943e;
              }
            }
            .iconchaosong{
              color:#3296fa;
              &:hover{
                color:#fff;
                background: #3296fa;
              }
            }
            .iconfenzhi{
              color:#15bc83;
              &:hover{
                color:#fff;
                background: #15bc83;
              }
            }
            .text{
              display: block;
              font-size: 14px;
              color: #666;
            }
          }
        }
      }
    }
  }
</style>
